import { useRef, useMemo } from "openinula";
import ECharts from "inula-echarts";
import { AnimateTransition } from "inula-transitions";

function MapChart(props) {
  const nodeRef = useRef(null);

  const style = Object.assign(
    {
      width: "800px",
      height: "800px",
      position: "absolute",
    },
    props.style
  );

  const option = useMemo(() => {
    const { meta } = props;

    if (meta.option) {
      return meta.option();
    }

    return null;
  });

  return (
    <AnimateTransition nodeRef={nodeRef} appear={true} in={true} timeout={1000} classNames={props.meta.transitionClass}>
      <div ref={nodeRef} style={style}>
        <ECharts option={option} />
      </div>
    </AnimateTransition>
  );
}

export default MapChart;
